<template>
  <div class="title">
    <div class="l adorn"></div>
    <span>{{ title }}</span>
    <div class="r adorn"></div>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
  },
};
</script>
<style lang="scss" scoped>
.title {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.12rem;
  span {
    min-width: 4em;
    color: #8d8d8d;
    line-height: 0.17rem;
    margin: 0 0.12rem;
    text-align: center;
    white-space: nowrap;
  }
  .adorn {
    height: 1px;
    flex: 2;
    width: 0;
    position: relative;
    display: block;
    &.l {
      background: linear-gradient(
        135deg,
        rgba(199, 201, 204, 0) 0%,
        #e7ebf0 100%
      );
    }
    &.r {
      background: linear-gradient(
        297deg,
        rgba(199, 201, 204, 0) 0%,
        #e7ebf0 100%
      );
    }
    &::after {
      content: "";
      display: block;
      position: absolute;
      width: 0.04rem;
      height: 0.04rem;
      border: 0.01rem solid #e7ebf0;
      background: #fff;
      top: 50%;
      transform: translateY(-50%) rotate(47deg);
    }
    &.l::after {
      right: 0;
    }
    &.r::after {
      left: 0;
    }
  }
}
</style>
